<template>
  <div class="book-info">
    <el-container>
      <el-aside width="160px">
        <img
          v-show="coverUrl != ''"
          :src="coverUrl"
          :alt="book.title"
          :title="book.title"
          class="cover"
          @click="openBookDetail"
        />
        <dummy-cover v-if="coverUrl == ''" :title="book.title"></dummy-cover>
      </el-aside>
      <el-main>
        <a class="name">
          <span @click="openBookDetail">{{book.title}}</span>
        </a>
        <p class="desc" :title="book.intro">{{book.intro}}</p>
        <p class="rate">
          <el-rate v-model="rate" disabled show-score></el-rate>
        </p>
        <p class="stats">
          <span>
            <ri i="star" size="lg" class="mark"></ri>
            <label>128</label>
          </span>
          <span>
            <ri i="edit" size="lg"></ri>
            <label>12</label>
          </span>
          <span>
            <ri i="comments" size="lg"></ri>
            <label>99</label>
          </span>
          <span>
            <ri i="quote" size="lg"></ri>
            <label>58</label>
          </span>
        </p>
      </el-main>
    </el-container>
    <div class="toolbar" v-if="showDefaultToolbar">
      <ri i="edit" title="编辑" @click="editBook"></ri>
      <ri i="share" title="分享" @click="shareBook"></ri>
      <ri class="grey" i="delete" title="删除" @click="removeBook"></ri>
    </div>
    <div class="toolbar">
      <slot name="toolbar" :book="book"></slot>
    </div>
  </div>
</template>

<script>
import { toHumanString } from "@js/math.js";
import DummyCover from "@tools/DummyCover.vue";
export default {
  components: {
    DummyCover
  },
  props: {
    book: Object,
    detailUrlMaker: Function,
    showDefaultToolbar: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      rate: 4.9
    };
  },
  computed: {
    coverUrl() {
      return `/res/img/${this.book.cover}_file.png`;
    },
    popularity() {
      return toHumanString(1);
    }
  },
  methods: {
    onClick() {
      console.log("On book info click");
    },
    editBook() {
      this.$router.push("/works/books/edit/" + this.book.id);
    },
    shareBook() {
      // TODO: implement this
    },
    removeBook() {
      this.$confirm("确认删除书籍？").then(() => {
        this.authGet("api/v1/books/remove/" + this.book.id)
          .then(() => {
            this.$message("书籍删除成功");
            this.$emit("book-removed", this.book.id);
          })
          .catch(err => {
            this.$message("书籍删除失败！ " + err);
          });
      });
    },
    openBookDetail() {
      let url = '';
      if (this.detailUrlMaker) {
        url = this.detailUrlMaker(this.book);
      } else {
        url = "/works/books/detail/" + this.book.id + "/toc";
      }
      this.$router.push(url);
    }
  }
};
</script>

<style lang="stylus" scoped>
.el-rate__icon
  margin-right 0px

div.book-info
  width 450px
  margin 15px 15px 50px 15px
  padding 5px
  text-align left
  border 1px solid #fff

  .cover
    float left
    width 140px
    height 203px
    border 1px solid #ebebeb
    background-position center
    background-size 100%
    box-shadow 2px 4px 6px #bbb
    cursor pointer

  .el-main
    height 220px
    padding 0px 0px 0px 6px

    .name
      height 24px
      line-height 24px
      font-weight bold
      font-size 1.2em
      color #333 !important
      cursor pointer

    .desc
      margin-top 5px
      height 40px
      line-height 20px
      font-size 12px
      color #999

    .rate
      margin-top 91px

    .stats
      margin-top 10px
      height 20px
      font-size 14px

      span
        margin-right 10px
        color #999

        .icon-button
          margin-right 4px
          color #999

    .c-red
      color red

  .toolbar
    width 160px

    .icon-button
      margin-right 5px
      color #409EFF
      cursor pointer

    .grey
      color #666

      .icon-button
        color #666

    .right
      float right
</style>


